<template>
  <div class="dashboard-editor-container">
    <el-row class="dashboard-btn">
      <el-button :type="btnType===1?'warning':'info'" @click="btnClick(1)">当日</el-button>
      <el-button :type="btnType===2?'warning':'info'" @click="btnClick(2)">月份</el-button>
      <el-button :type="btnType===3?'warning':'info'" @click="btnClick(3)">年份</el-button>
      <el-date-picker
        v-model="searchFormList.date"
        type="date"
        value-format="timestamp"
        placeholder="选择日期"
        @change="dateChange"
      >
      </el-date-picker>
    </el-row>
    <my-table
      :data="tableData"
      :col-configs="colConfigs"
      v-loading="listLoading"
    >
    </my-table>

  </div>
</template>

<script>
  import {
    getSumAccountPay
  } from '@/api/accountsquery'
  import myTable from '@/components/myTable'

  export default {
    name: 'DashboardAdmin',
    components: {
      myTable
    },
    computed: {
      roleType() {
        return this.$store.state.user.roleType
      },
      teamId() {
        return this.$store.state.user.teamId
      }
    },
    mounted() {
      this.$set(this.searchFormList, 'date', new Date().getTime())
      this.fetchData()
    },
    data() {
      return {
        colConfigs: [
          { prop: 'sumContractPay', label: '总合同金额(万元)', width: '150' },
          { prop: 'sumBillPay', label: '总开票金额(万元)', width: '150' },
          { prop: 'sumAccountlPay', label: '总到账金额(万元)', width: '150' },
          { prop: 'costPay', label: '总支出金额(万元)', width: '150' },
          { prop: 'balance', label: '总余额(万元)', width: '150' }
        ],
        searchFormList: {},
        tableData: [],
        listLoading: true,
        btnType: 1
      }
    },
    methods: {
      fetchData() {
        this.searchFormList.type = this.btnType
        this.searchFormList.roleType = this.roleType
        this.searchFormList.teamId = this.teamId
        this.listLoading = true
        getSumAccountPay(this.searchFormList).then(response => {
          this.tableData = []
          this.tableData.push(response.responseBody)
          this.listLoading = false
        })
      },
      btnClick(type) {
        this.btnType = type
        this.fetchData()
      },
      dateChange() {
        this.fetchData()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    height: calc(100vh - 130px);
    padding: 32px;
    overflow: auto;
    .dashboard-btn {
      margin-bottom: 20px;
    }
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
      -moz-box-shadow: 2px 2px 5px #333333;
      -webkit-box-shadow: 2px 2px 5px #333333;
      box-shadow: 2px 2px 5px #333333;
      .chart-wrapper-title {
        margin-bottom: 20px;
      }
    }
  }
</style>
